<template>
  <div>
    <div style="padding:20px; margin-bottom:80px">
      <div class="all_shop" v-if="gunList">
        <!-- <div>
          <div>全部商品:</div>
          <div>
            <div class="search_list" style="margin-top:10px;">
              <div class="serach_item" v-for="item in distanceList" :key="item.id">
                <div
                  @click="handDis(item.id)"
                  :class="['item_i', disID == item.id ? 'dis_is' : '']"
                >{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>-->
        <div>
          <div>选择油号:</div>
          <div>
            <div class="search_list" style="margin-top:10px;">
              <div class="serach_item" v-for="(item,index) in newGunList" :key="index">
                <div
                  @click="handDis2(index,item)"
                  :class="['item_i', disID2 == index ? 'dis_is' : '']"
                >{{ item.oilName }}</div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>选择枪号:</div>
          <div>
            <div class="search_list" style="margin-top:10px;">
              <div class="serach_item" v-for="(item,index) in newgunNum" :key="index">
                <div
                  @click="handDis3(index,item)"
                  :class="['item_i', disID3 == index ? 'dis_is' : '']"
                >{{ item.gunNo }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="pic_box">
        <div class="pic_list">
          <div class="pic_title">加油金额:</div>
          <input v-model="picNum" class="pic_input" type="text" placeholder="请输入消费金额" />
        </div>
        <div class="search_list search_list_active" style="margin-top:10px;">
          <div class="serach_item" v-for="item in monNum" :key="item.id">
            <div
              @click="handDis4(item)"
              :class="['item_i', disID4 == item.id ? 'dis_is' : '']"
            >{{ item.name }}</div>
          </div>
        </div>
      </div>-->
    </div>
    <div class="sub">
      <div class="sub_title" @click="handGoup">下一步</div>
    </div>
  </div>
</template>

<script>
import tag from '@/components/tag/index.vue'
import myUpOil from '@/components/myUpOil/index.vue'
export default {
  components: {
    tag,
    myUpOil
  },
  props: {
    gunList: {
      type: Array
    }
  },
  watch: {
    newGunList() {
      if (this.gunList) {
        this.newgunNum = this.gunList[0].gunNos
      }
    }
  },
  computed: {
    newGunList: function() {
      return this.gunList
    }
    // gunNum: function() {
    //   if (this.gunList) {
    //     this.newgunNum = this.gunList[0].gunNos
    //     return this.newgunNum
    //   }
    // }
  },
  mounted() {
    // if (this.gunList) {
    //   this.gunNum = this.gunList[0].gunNos
    // }
  },
  data() {
    return {
      newgunNum: [],
      active: '',
      picNum: '',
      disID: '',
      disID2: '',
      disID3: '',
      disID4: '',
      monNum: [
        {
          name: '100',
          id: 0
        },
        {
          name: '200',
          id: 1
        },
        {
          name: '300',
          id: 2
        },
        {
          name: '500',
          id: 3
        }
      ]
    }
  },
  methods: {
    // platformCode=1778811&gasId=油站id&oilNo=92#&gunNo=1 subOread
    handGoup() {
      this.$emit('handGoup')
    },
    onClickLeft() {},
    handDis(id) {
      this.disID = id
    },
    handDis2(id, row) {
      this.disID2 = id
      this.newgunNum = row.gunNos
      // this.newgunNum = this.gunList[0].gunNos
      console.log(row, this.newgunNum, row.gunNos)
      this.$emit('handRow', row)
    },
    handDis3(id, row) {
      this.$emit('handDis3', row)
      this.disID3 = id
    },
    handDis4(row) {
      this.disID4 = row.id
      this.picNum = row.name
    }
  }
}
</script>

<style lang="scss" scoped>
.sub {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
  border-top: 1px solid #eee;
  box-sizing: border-box;
  background-color: #fff;
  .sub_title {
    background-color: rgb(195, 0, 51);
    height: 40px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
  }
}

.search_list_active.search_list {
  justify-content: space-between;
  padding-right: 0;
}
.pic_box {
  .pic_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .pic_title {
      font-size: 15px;
    }
    .pic_input {
      outline: none;
      -webkit-appearance: none;
      border-radius: 0;
      border: 0;
      border-radius: 4px;
      border-color: #eee;
      border: 1px solid #909399;
      height: 30px;
      width: 250px;
      padding-left: 10px;
    }
  }
}
.all_shop {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
.search_list .item_i.dis_is {
  border-color: #e1251b !important;
  color: #e1251b !important;
}
.search_list {
  display: flex;
  align-content: center;
  padding-right: 20px;
  flex-wrap: wrap;
  .serach_item {
    width: 25%;
    margin-bottom: 15px;
    .item_i {
      border-radius: 4px;
      width: 60px;
      height: 25px;
      border: 1px solid #909399;
      line-height: 25px;
      text-align: center;
      color: #909399;
      margin: 0 auto;
    }
  }
}
</style>
